@import '@/style/variables.less';
.button {
  width: fit-content;
  padding: @button-padding;
  border-radius: @button-border-radius;
  font-size: @button-font-size;
  user-select: none;
  text-align: center;
  vertical-align: middle;
  transition: color 300ms, background-color 300ms, cursor 300ms;
  & > i {
    margin-right: 5px;
  }
  &.default {
    background-color: @button-default-bgcolor;
    &:hover {
      cursor: pointer;
      background-color: @button-default-hover-bgcolor;
    }
  }
  &.primary {
    background-color: @button-primary-bgcolor;
    color: @button-primary-font-color;
    &:hover {
      cursor: pointer;
      background-color: @button-primary-hover-bgcolor;
    }
  }
  &.simple {
    color: @button-simple-font-color;
    &:hover {
      cursor: pointer;
      color: @button-simple-hover-font-color;
    }
  }
  &.more {
    color: @button-more-hover-font-color;
    &:hover {
      cursor: pointer;
      color: @button-simple-hover-font-color;
    }
  }
}
